<template>
	<view id="form-box" class="form-box">
		<view>
			<view class="input-box">
				<!-- <text>订购手机号</text> -->
				<input focus="true" class="input" type="text" maxlength="11" @input="inputPhone"
					v-model="formData.mobile" placeholder="输入购买手机号">
				<!-- <image class="mobile-icon" mode="heightFix" src="/static/images/mobile-icon.png">
				</image> -->
			</view>
			<view v-if="isNeedSendCode" class="input-box">
				<input class="input" type="text" maxlength="6" v-model="formData.code" placeholder="请输入验证码">
				<view @click="sendCodeHandler" class="send-code">{{sendCodeText}}</view>
			</view>
		</view>
		<view class="submit" @click="submitMethod">
			<image class="submit-btn" mode="widthFix" :src="btnImg">
			</image>
		</view>
		<view class="clauze">
			<checkbox-group @change="agreementChange">
				<checkbox :checked="formData.isAgreement" color="#ef3d2b" />
			</checkbox-group>
			<view>
				<text class="text" @click="agreementChange">
					我已阅读并同意喜马拉雅
				</text>
				<text class="tip-color" @click.stop="showAgreementHandler(1)">《隐私信息保护政策》</text>
				<text class="tip-color" @click.stop="showAgreementHandler(2)">《用户服务协议》</text>
				<text class="tip-color" @click.stop="showAgreementHandler(3)">《关于客户个人信息收集、使用规则公告》</text>
				<text class="tip-color" @click.stop="showAgreementHandler(4)">《自动续费服务规则》</text>
				<text class="text">
					内容
				</text>

			</view>
		</view>
		<xmly-agreement v-if="isShowAgreement" @ok="isShowAgreement=false"
			:agreementType="agreementType"></xmly-agreement>
	</view>

</template>

<script>
	import httpUtil from "@/utils/httpUtil.js";
	import validParamsUtil from "@/utils/validParamsUtil.js";
	import messageUtil from "@/utils/messageUtil.js"
	import countDownUtil from "@/utils/countDownUtil.js"
	import deviceUtil from "@/utils/deviceUtil.js";
	import userApi from "@/api/userApi.js"
	// import wxMiniPayHandler from "@/api/wxMiniPayHandler.js"


	export default {
		name: "xmly-submit-form",
		data() {
			return {
				formData: {
					mobile: '',
					code: '',
					isAgreement: true,
				},
				isNeedSendCode: false,
				isShowAgreement: false,
				agreementType: 3,
				sendCodeDownNumber: 0,
				sendCodeText: '获取验证码',
				isShowOrderSuccess: false,
			};
		},
		props: ['btnImg', 'param', 'sutingcheMobile', 'mobile'],
		computed: {

		},
		onLoad() {
			if(this.props.mobile){
				this.formData.mobile = this.props.mobile
			}
			// if (this.mobile) {
			// 	this.formData.mobile = this.mobile
			// 	inputPhone()
			// 	if (props.isNeedSendCode !== false) {
			// 		this.sendCodeHandler()
			// 	}

			// }
		},
		methods: {
			showAgreementHandler(type) {
				switch (parseInt(type)) {
					case 1:
						this.agreementType = 1
						this.isShowAgreement = true
						return;
					case 2:
						this.agreementType = 2
						this.isShowAgreement = true
						return;
					case 3:
						this.agreementType = 3
						this.isShowAgreement = true
						return;
					case 4:
						this.agreementType = 4
						this.isShowAgreement = true
						return;
				}
			},
			inputPhone() {
				if (this.formData.mobile == 11) {
					this.formData.isAgreement = true;
					// getPhoneYunYingMethod()
					// autoSubmit();
					// this.$emit('inputMobile', formData.value.mobile)
				}
			},
			submitMethod() {
				console.log('submitMethod')
				if (!validParamsUtil.validPhone(this.formData.mobile)) {
					messageUtil.showFail('手机号格式不正确')
					return;
				}
				if (this.isNeedSendCode) {
					if (this.formData.code.length < 1) {
						messageUtil.showFail('请输入验证码')
						return;
					}
				}

				if (!this.formData.isAgreement) {
					messageUtil.showFail('请同意并勾选协议')
					return;
				}

				this.submit()

			},
			submit() {
				let params = {
					a: httpUtil.getA(),
					mobile: this.formData.mobile,
					openid: userApi.getUserId(),
					param: '',
					type: 1,

				}
				// #ifdef MP-WEIXIN
				params.env = 'mini'
				// #endif
				messageUtil.showLoading()
				httpUtil.post("/api/xmly/api_order", params, res => {
					messageUtil.closeLoading()


					// #ifdef MP-WEIXIN
					let extraData = JSON.parse(res.data.payInfo)
					console.log('extraData', extraData)
					wx.navigateToMiniProgram({
						appId: 'wxbd687630cd02ce1d',
						extraData,
						success(res) {
							// 打开成功
							if (successCallBack) {
								successCallBack(res)
							}
						},
						fail(res) {
							if (errCallBack) {
								errCallBack(res)
							}
						}
					})
					// #endif

					// #ifdef H5
					uni.navigateTo({
						url: "/pages/web/web?url=" + encodeURIComponent(res.data.payInfo)
					})
					// #endif


				}, err => {
				})
			},
			agreementChange(e) {
				this.formData.isAgreement = !this.formData.isAgreement;
			}
		}

	}
</script>

<style lang="scss" scoped>
	@keyframes butChange {
		0% {
			transform: scale(1);
		}

		50% {
			transform: scale(1.1);
		}

		100% {
			transform: scale(1);
		}
	}

	.title {
		font-size: 2.2rem;
		color: #302c2d;
		font-stretch: normal;
		letter-spacing: .1rem;
		text-align: center;
		font-weight: 600;
		position: relative;


		// >view {
		// 	border-bottom: solid 0.8rem #ffed8b;
		// 	display: inline-block;
		// 	height: 2.1rem;
		// }
	}

	.time {
		text-align: center;
		font-size: 2rem;
		font-weight: 600;
		font-stretch: normal;
		letter-spacing: .1rem;
		color: #f9ebcc;
		margin-top: .5rem;
		margin-bottom: 1rem;

		span {
			font-size: 1rem;
		}
	}

	.input-box {
		width: 100%;
		margin: 0 auto 20rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
		height: 76rpx;
		position: relative;


		text {
			font-size: 32rpx;
			letter-spacing: 1rpx;
			color: #323232;
			text-align: left;
			display: inline-block;
			font-weight: 600;
			width: 26%;
			font-family: SourceHanSansCN-Medium;
		}

		.input {
			flex-grow: 1;
			height: 90rpx;
			box-sizing: border-box;
			font-family: SourceHanSansSC-Normal;
			font-size: 36rpx;
			letter-spacing: 1rpx;
			color: #313131;
			background-color: #ffffff;
			border-radius: 50rpx;
			padding-left: 20rpx;

			.input-placeholder {
				font-size: 36rpx;
				color: #313131 !important;
			}

		}

		.mobile-icon {
			// height: 76rpx;
			width: auto;
			height: 46rpx;
			position: absolute;
			top: 15rpx;
			right: 25rpx;
		}




		.type-list-box {
			flex-grow: 1;
			display: flex;
			justify-content: flex-end;
			align-items: center;

			.item {
				padding: 9rpx;
				border-radius: 17rpx 12rpx;
				font-size: 26rpx;
				letter-spacing: 1rpx;
				background-color: #efefef;
				border: solid 1rpx #c2c2c2;
				color: #8e8e8e;
				margin-right: 27rpx;

				&:last-child {
					margin-right: 0;
				}
			}

			.current {
				background-color: #f0f8fd;
				border: solid 1rpx #94c0ff;
				color: #69a2eb;
			}
		}

		.send-code {
			width: 316rpx;
			height: 76rpx;
			line-height: 76rpx;
			text-align: center;
			background-color: #fb5f2b;
			border-radius: 38rpx;
			font-family: SourceHanSansSC-Normal;
			font-size: 30rpx;
			letter-spacing: 3rpx;
			color: #ffffff;
			margin-left: 20rpx;
		}
	}

	.clauze {
		width: 100%;
		margin: 15rpx auto 0;
		text-align: left;
		padding: 0 !important;
		font-family: SourceHanSansSC-Light;
		display: flex;
		align-items: center;
		color: #292929;

		.text {
			letter-spacing: 2rpx;
			font-size: 22rpx;
			color: #292929;
		}

		.tip-color {
			color: #DB202D;
			font-size: 22rpx;
		}
	}

	// ::v-deep(.van-checkbox__text) {
	// 	color: #d44848;
	// 	font-size: .8rem;
	// }

	.submit {
		width: 100%;
		margin: 40rpx auto 0;
		display: block;
		text-align: center;
		padding: 0;

		.submit-btn {
			animation: butChange 1s infinite;
			width: 100%;
			height: auto;
		}
	}

	.pay-type-icon {
		display: block;
		width: auto;
		width: 100%;
		margin-top: 30rpx;
	}
</style>